/* ================================================== */
/* 所有类必须以 hover- 作为前缀 */
/* ================================================== */

/* 翻转
 ================================================== */

.hover-filpx-wrap .hover-filpx,
.hover-filpx {
  transform : rotateY(0deg);
  transition: transform var(--ss-duration);
}

.hover-filpx-wrap:hover .hover-filpx,
.hover-filpx:hover {
  transform : rotateY(180deg);
  transition: transform var(--ss-duration);
}

/* 放大
 ================================================== */
*:has(> .hover-zoomin) {
  overflow: hidden;
}

.hover-zoomin-wrap .hover-zoomin {
  transform : scale(1.0);
  transition: transform var(--ss-duration);
}

.hover-zoomin-wrap:hover .hover-zoomin,
.hover-zoomin:hover {
  transform: scale(1.1);
}

/* scalex 滑动块左进右出
 ================================================== */

.hover-slide-wrap {
  position: relative;
}

.hover-slide-wrap .hover-slide-right,
.hover-slide-wrap .hover-slide-left {
  position  : absolute;
  left      : 0;
  bottom    : 0;
  width     : 100%;
  transform : scaleX(0);
  transition: transform var(--ss-duration);
}

.hover-slide-wrap .hover-slide-right {
  transform-origin: right;
}

.hover-slide-wrap .hover-slide-left {
  transform-origin: left;
}

.hover-slide-right~*,
.hover-slide-left~* {
  position: relative;
}

.hover-slide-wrap:hover .hover-slide-right,
.hover-slide-wrap:hover .hover-slide-left {
  transform: scaleX(1);
}

.hover-slide-wrap:hover .hover-slide-right {
  transform-origin: left;
}

.hover-slide-wrap:hover .hover-slide-left {
  transform-origin: right;
}

/* 字体颜色
 ================================================== */

.hover-text-danger:hover {
  color: var(--bs-danger) !important;
}

.hover-text-success:hover {
  color: var(--bs-success) !important;
}

.trans-origin-left {
  transform-origin: left !important;
}

.trans-origin-right {
  transform-origin: right !important;
}

/******* scalex 悬浮效果 哪里进哪里出1 *******/

.hover-scalex-tor-wrap {
  position: relative;
}

.hover-scalex-tor-wrap .hover-scalex-tor {
  position        : absolute;
  left            : 0;
  bottom          : 0;
  width           : 100%;
  height          : 3px;
  background-color: #cf0628;
  transform       : scaleX(0);
  transition      : transform .3s;
  transform-origin: left;
}

.hover-scalex-tor-wrap:hover>.hover-scalex-tor {
  transform       : scaleX(1);
  transform-origin: left;
}

/******* scalex 悬浮效果 哪里进哪里出2 *******/

.hover-scalex-wrap:hover .hover-scalex,
.hover-scalex:hover.scalex {
  transform       : scaleX(1) !important;
  transition      : transform .3s;
  transform-origin: left;
}

.hover-scalex-wrap .hover-scalex {
  transform       : scaleX(0) !important;
  transition      : transform .3s;
  transform-origin: left;
}

/******* scale 悬浮效果放大 *******/

.hover-scale-shrink-wrap {
  position: relative;
  overflow: hidden;
}

.hover-scale-shrink-wrap .hover-scale-shrink {
  transform : scale(1.2);
  transition: transform .3s;
}

.hover-scale-shrink-wrap:hover .hover-shrink-shrink,
.hover-scale-shrink:hover {
  transform: scale(1);
}

/******* scale 悬浮效果X,Y放大 *******/
.hover-scale-1_05-wrap .hover-scale-1_05 {
  transition: transform .3s;
}

.hover-scale-1_05-wrap:hover .hover-scale-1_05 {
  transform : scale(1.08, 1.06);
  transition: transform .3s;
}

.hover-scale-1_05-wrap:hover .hover-scale-1_05-h {
  transform : scale(1.04, 1.06);
  transition: transform .3s;
}

/******* 悬浮效果translatey up *******/

.hover-translatey-up-wrap {
  position: relative;
}

.hover-translatey-up-wrap .hover-translatey-up {
  transform : translateY(0);
  transition: transform .3s;
}

.hover-translatey-up-wrap:hover .hover-translatey-up {
  transform : translateY(-30px);
  transition: transform .3s;
}

/******* 悬浮效果translatex tor *******/

.hover-translatex-tor-wrap {
  position: relative;
}

.hover-translatex-tor-wrap .hover-translatex-tor {
  transform : translatex(0);
  transition: transform .3s;
}

.hover-translatex-tor-wrap:hover .hover-translatex-tor {
  transform : translatex(30px);
  transition: transform .3s;
}

/******* 鼠标悬浮显示 *******/

.hover-opacity-show-wrap {
  position: relative;
}

.hover-opacity-show-wrap .hover-visible-show,
.hover-opacity-show {
  opacity   : 0 !important;
  transition: opacity .3s;
}

.hover-opacity-show-wrap:hover .hover-opacity-show,
.hover-opacity-show:hover {
  opacity: 1 !important;
}

/******* 蒙版效果 *******/

.hover-mask-wrap {
  position: relative;
}

.hover-mask-wrap .hover-mask {
  position  : absolute;
  background: rgba(0, 0, 0, .5);
  top       : 0;
  left      : 0;
}

.hover-mask-wrap:hover .hover-mask {
  position  : absolute;
  background: rgba(0, 0, 0, 0);
  top       : 0;
  left      : 0;
}

/******* 高度变化 *******/

.hover-heighten-wrap {
  position: relative;
}

.hover-heighten-wrap .hover-heighten {
  position  : absolute;
  left      : 0;
  bottom    : 0;
  height    : 3rem;
  transition: height .2s linear;
}

.hover-heighten-wrap:hover .hover-heighten {
  position  : absolute;
  left      : 0;
  bottom    : 0;
  height    : 4rem;
  transition: height .2s linear;
}


/******* 鼠标悬浮左右摆动 *******/

.hover-swing-wrap:hover .hover-swing {
  -webkit-animation: rotate 0.7s ease-in-out both;
  animation        : rotate 0.7s ease-in-out both;
}

@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    transform        : rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    -webkit-transform: rotate(15deg) translate3d(0, 0, 0);
    transform        : rotate(15deg) translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform: rotate(-15deg) translate3d(0, 0, 0);
    transform        : rotate(-15deg) translate3d(0, 0, 0);
  }

  75% {
    -webkit-transform: rotate(1deg) translate3d(0, 0, 0);
    transform        : rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    transform        : rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    transform        : rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    -webkit-transform: rotate(15deg) translate3d(0, 0, 0);
    transform        : rotate(15deg) translate3d(0, 0, 0);
  }

  50% {
    -webkit-transform: rotate(-15deg) translate3d(0, 0, 0);
    transform        : rotate(-15deg) translate3d(0, 0, 0);
  }

  75% {
    -webkit-transform: rotate(1deg) translate3d(0, 0, 0);
    transform        : rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: rotate(0deg) translate3d(0, 0, 0);
    transform        : rotate(0deg) translate3d(0, 0, 0);
  }
}

/* 悬浮导航字体动画 */
/******* 悬浮字体向上滚动 *******/

.hover-translate-top-wrap {
  overflow: hidden;
}

.hover-translate-top {
  transform : translateY(0px);
  transition: transform .3s linear;
}

.hover-translate-top:hover {
  transform: translateY(-30px);
}

.hover-translate-top-item {
  position   : relative;
  line-height: 30px;
}

.hover-translate-top-item::before {
  position   : absolute;
  top        : 100%;
  left       : 0;
  content    : '平台产品';
  line-height: 30px;
}

/******* 悬浮字体向右滚动 *******/

.hover-translate-right-wrap {
  overflow: hidden;
}

.hover-translate-right-item>span:nth-child(1) {
  width: 10px;
}

.hover-translate-right {
  transform : translateX(-10px);
  transition: all .3s linear;
}

.hover-translate-right-wrap:hover>.hover-translate-right,
.hover-translate-right:hover {
  transform: translateX(0px);
}

/******* 悬浮背景没有颜色 *******/
.hover-bg-none:hover {
  background: transparent !important;
  transition: all .3s;
}

/******* 悬浮背景变为主题info色 *******/
.hover-bg-info-wrap:hover .hover-bg-info,
.hover-bg-info:hover {
  background: var(--bs-info) !important;
  transition: all .3s;
}

/******* 悬浮背景变为主题success色 *******/
.hover-text-success-wrap:hover .hover-text-success,
.hover-text-success:hover {
  color     : var(--bs-success) !important;
  transition: all .3s;
}

/******* animation *******/

.message {
  position       : relative;
  left           : 15px;
  bottom         : 15px;
  z-index        : 99;
  width          : 60px;
  height         : 60px;
  display        : flex;
  justify-content: center;
  align-items    : center;
}

.message span {
  position     : absolute;
  width        : 60px;
  height       : 60px;
  left         : 0px;
  bottom       : 0px;
  background   : #0055b1;
  border-radius: 50%;
  animation    : living 1s linear infinite;
}

@keyframes living {
  0% {
    transform: scale(1);
    opacity  : 0.5;
  }

  50% {
    transform: scale(1.5);
    opacity  : 0;
  }

  60% {
    transform: scale(1.4);
    opacity  : 1;
  }

  50% {
    transform: scale(1.3);
    opacity  : 0;
  }

  100% {
    transform: scale(1);
    opacity  : 0.5;
  }
}

/******* fadeIn *******/
.hover-fadeInUp-wrap:hover .hover-fadeInUp {
  transform : translateY(0);
  transition: all 1s;
}

.hover-fadeInUp-wrap .hover-fadeInUp {
  transform : translateY(100%);
  transition: all 1s;
}